<template>
  <div class="my-title">
    <p class="title">{{ title }}</p>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'MyTitle',
    props: {
      title: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        
      }
    },
  }
</script>
<style lang="scss" scoped>
  .my-title {
    @include flex(space-between, center);
    .title {
      font-size: $font_14;
      color: #222;
      font-weight: bold;
      position: relative;
      padding-left: 10px;
      &::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 10px;
        background: $menuActiveText;
        left: 0;
        top: 4px;
      }
    }
  }
</style>